<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <my-component></my-component>
</div>
<script src="../js/vue.min.js"></script>
<script>
    //向子组件传递数据
//声明一个bus 将其作为一个中间变量 和利用vuex的效果是一样的 都是利用第三方的中间件来实现
    var bus = new Vue({
        data:{
            msg:"111"
        },
        methods:{
            resetdata:function(msg){
                this.msg=msg
            }
        }
    })


    Vue.component('my-component', {
        //模板里不支持驼峰的属性写法，需要转换为‘-’连接的属性写法
        data:function(){
            return{
                parentMsg: 'prop传值',
                tt:'init'
            }
        },
        created() {
          bus.$on('aa', function(dt){
//这里的this是bus
              this.resetdata(dt)
              console.log(this.msg)
            })

//            bus.$on('aa', this.hanget(dt))
//            bus.$on('id-selected', this.someMethod)
        },
        mounted(){
//            第一次挂载的时候调用
            this.hanget(bus.msg)
        },
        updated: function () {
//            组件内容发生变化时候调用
            this.hanget(bus.msg)
        },
        methods:{
            hanget:function(data){
                console.log("tt"+data)
                this.tt=data
            }
        },
        computed:{
            getmessage:function(){
                return this.tt
            }
        },

        template: '<div>'+'<input v-model="parentMsg">{{getmessage}}'+'<br>'+'<child-component :gedata="parentMsg"></child-component><child-component2></child-component2>' +'</div>',
        components: {
            'child-component': {
                props: ['gedata'],
                template: '<div>{{msg}}</div>',
                mounted: function () {
                    this.joinString()
                },
                updated: function () {
                    this.joinString()
                },
                data: function() {
                    return {
                        msg: 'Hello, vue router!'
                    }
                },
                methods:{
                    joinString:function(){
                        this.msg=this.gedata+"aaa+";
                        bus.$emit('aa', this.msg )
                    }
                }

            },
            'child-component2':{
                template:'<div>我是末班二号</div>'
            }
        }
    });
    // 创建根实例1
var app=new Vue({
        el: '#example',
        data: {
            a: 1
        },
        created: function () {
            // `this` 指向 vm 实例  vm==data
//            console.log('a is: ' + this.a)
        }
    });
</script>
</body>
</html>